<template>
  <div id="jobCheckIndex">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-check"
        @click="passWork"
        v-permission="'wh:system:taskContentExamined:adopt'"
      >
        通过
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-close"
        plain
        @click="notPass"
        v-permission="'wh:system:taskContentExamined:noadopt'"
      >
        不通过
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
      <selectColumn
        ref="selectCum"
        @setColumn="setColumns"
        :nameList="columnList"
      ></selectColumn>
    </div>
    <!--下部table-->
    <div class="table-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
        max-height="490"
        ref="table"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectAble"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="50" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.avatar"
          label="头像"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <listImgString :imgInfo="scope.row.avatar"></listImgString>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.nickname"
          label="昵称"
          prop="nickname"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.nickname }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.dpAccount"
          label="大鹏号"
          prop="dpAccount"
          min-width="110"
        >
          <template slot-scope="scope">
            {{ scope.row.dpAccount }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.jobType"
          label="类型"
          prop="jobType"
          min-width="70"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.jobType">{{
              scope.row.jobType | filterName('jobWorkType')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.taskTitle"
          label="作业标题"
          prop="taskTitle"
          min-width="110"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.taskTitle">{{ scope.row.taskTitle }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.identificationCode"
          label="作业码"
          prop="identificationCode"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.identificationCode }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.courseType"
          label="作业性质"
          prop="courseType"
          min-width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.courseType">{{
              scope.row.courseType | filterName('jobCourseType')
            }}</span>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.courseTitle"
          label="课程标题"
          prop="courseTitle"
          min-width="80"
        >
          <template slot-scope="scope">
            {{ scope.row.courseTitle }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.jobContent"
          label="文字内容"
          prop="jobContent"
          min-width="80"
          class-name="text-overflow"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.jobContent"
              v-html="filterContent(scope.row.jobContent)"
              class="textContent"
              @click="showDetail(scope.row)"
              >{{ scope.row.jobContent }}</span
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.jobImagesAddress"
          label="视图内容"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.jobType === 'TEXT'">
              <listImgString
                :imgInfo="scope.row.jobImagesAddress"
              ></listImgString>
            </span>
            <span
              v-else-if="scope.row.jobType === 'VIDEO'"
              class="img-box"
              @click="videoPlay(scope.row.jobImagesAddress)"
            >
              <div class="img-inner-box">
                <el-image :src="scope.row.imgInfo"></el-image>
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.jobSubmitTime"
          label="创建时间"
          prop="jobSubmitTime"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.jobSubmitTime | timeToTime }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.jobLastModificationTime"
          label="最后编辑时间"
          min-width="110"
        >
          <template slot-scope="scope">
            {{ scope.row.jobLastModificationTime | timeToTime }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.userProperty"
          label="用户属性"
          prop="userProperty"
          min-width="80"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.userProperty"
              class="tag-span"
              :class="scope.row.userProperty | filterClass('checkUserAttr')"
              >{{ scope.row.userProperty | filterName('checkUserAttr') }}</span
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.mSubmitTime"
          label="机审时间"
          prop="jobSubmitTime"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.jobSubmitTime | timeToTime }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.orderNumber"
          label="机审结果"
          prop="orderNumber"
          min-width="80"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.machineStatu"
              class="tag-span"
              :class="scope.row.machineStatu | filterClass('machineStatus')"
              >{{ scope.row.machineStatu | filterName('machineStatus') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.checkStatu"
          label="人工审核结果"
          prop="checkStatu"
          min-width="110"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.checkStatu"
              class="tag-span"
              :class="scope.row.checkStatu | filterClass('personStatus')"
              >{{ scope.row.checkStatu | filterName('personStatus') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.categoryId"
          label="学院"
          prop="categoryId"
          min-width="110"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.categoryId"
              class="tag-span"
              :class="scope.row.categoryId | filterClass('collegeType')"
              >{{ scope.row.categoryId | filterName('collegeType') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.peopleApprovedUserName"
          label="审核人"
          prop="peopleApprovedUserName"
          min-width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.peopleApprovedUserName">{{
              scope.row.peopleApprovedUserName
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.peopleApprovedTime"
          label="人工审核时间"
          prop="peopleApprovedTime"
          min-width="110"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.peopleApprovedTime">{{
              scope.row.peopleApprovedTime
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnSHow.labelPrope"
          label="显性标签"
          prop="labelPrope"
          min-width="260"
        >
          <template slot-scope="scope">
            <explicitTag
              :labels="scope.row.labels"
              :showContentId="scope.row.jobcompletionId"
              @refresh="refresh"
            ></explicitTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="190">
          <template slot-scope="scope">
            <el-button
              v-permission="'wh:system:taskContentExamined:adopt'"
              v-if="scope.row.checkStatu === 'UNCHECKED'"
              type="text"
              @click="handlPassWork(scope.row.jobcompletionId)"
            >
              通过
            </el-button>
            <el-button
              v-permission="'wh:system:taskContentExamined:noadopt'"
              v-if="scope.row.checkStatu === 'UNCHECKED'"
              type="text"
              @click="handlNotPassWord(scope.row.jobcompletionId)"
            >
              不通过
            </el-button>
            <el-button
              type="text"
              v-permission="'wh:system:taskContentExamined:detail'"
              v-if="scope.row.checkStatu !== 'UNPASS'"
              @click="showDetail(scope.row)"
            >
              查看详情
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.checkStatu === 'PASS'"
              @click="deleteJob(scope.row.jobcompletionId)"
              >删除</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.checkStatu === 'UNPASS'"
              @click="showFailReason(scope.row)"
              >未通过理由</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <jobPage
      :searchParams="searchParams"
      :tableData="tableData"
      :hasTotal="true"
      :pageLoading="pageLoading"
      :total="total"
      @changePage="changePage"
    ></jobPage>
    <dialogDetailCom
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
    ></dialogDetailCom>
    <!-- 不通过理由弹窗 -->
    <del-dialog
      :del-dialog-data="delDialogData"
      @reasonDel="failRequest"
    ></del-dialog>
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>

<script>
import topSearch from '@component/contentCheck/jobCheck/topSearch' // 上部搜索条件
import dialogDetailCom from '@common/dialogDetailCom' // 详情-弹窗-公共组件
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import delDialog from '@common/delDialog' // 不通过理由弹窗
import { contentToStr, getVideoPara } from '@utils/pubFunction' // 内容筛选
import showVideo from '@common/showVideo'
import { getVideoImg } from '@utils/getFaceImg'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { columnMixin } from '@/mixins/columnShowHide'
import jobPage from '@common/jobPage'
import explicitTag from '@common/explicitTag'
import {
  getSearchList,
  passSingleAPI,
  passMultAPI,
  failSingleRequestAPI,
  failMultRequestAPI,
  deleteRequestAPI,
  ansyCountAPI
} from '@/api/contentCheck/jobContent'
export default {
  name: 'jobCheck',
  msg: '作业内容审核',
  mixins: [saveScrollMixins, columnMixin],
  components: {
    topSearch,
    dialogDetailCom,
    delDialog,
    showVideo,
    jobPage,
    listImgString,
    explicitTag
  },
  data() {
    return {
      loading: true,
      pageLoading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        categoryId: '', // 选择学院
        checkStatu: '', // 人审结果
        machineStatu: '', // 机审结果
        identCode: '', // 作业码
        courseType: '', // 作业性质
        timeLine: '', // 时间线
        courseTitle: '', // 课程名称
        order: '', // 排序规则
        jobType: '', // 作业类型
        timeType: '', // 时间
        taskTitle: '', // 作业标题查询
        checkUserId: '', // 审核人
        userAttribute: '', // 用户属性
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        userValue: '',
        userType: 'DAPENGACCOUNT',
        createTime: []
        // xPaginationCount: 0
      },
      flag: false,
      dialogData: {
        isShow: false, // 默认隐藏
        type: '', // 类型，workDetail-作品详情，jobDetail-作业详情
        id: '', // 编辑时，传递的参数
        title: ''
      },
      multipleSelection: [],
      powerAry: [],
      powerStr: 'system:taskContentExamined:list',
      canShowPage: false, // 是否显示当前页面
      delDialogData: {
        isShow: false,
        params: '',
        type: '不通过'
      },
      id: '',
      isDelete: false,
      videoData: {
        // 视频播放弹窗
        isShow: false,
        vid: ''
      },
      tableTemp: [],
      tempSize: 0,
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },
      columnList: [
        { label: '头像', value: 'avatar' },
        { label: '昵称', value: 'nickname' },
        { label: '大鹏号', value: 'dpAccount' },
        { label: '类型', value: 'jobType' },
        { label: '作业标题', value: 'taskTitle' },
        { label: '作业码', value: 'identificationCode' },
        { label: '作业性质', value: 'courseType' },
        { label: '课程标题', value: 'courseTitle' },
        { label: '文字内容', value: 'jobContent' },
        { label: '视图内容', value: 'jobImagesAddress' },
        { label: '创建时间', value: 'jobSubmitTime' },
        { label: '最后编辑时间', value: 'jobLastModificationTime' },
        { label: '用户属性', value: 'userProperty' },
        { label: '机审时间', value: 'mSubmitTime' },
        { label: '机审结果', value: 'orderNumber' },
        { label: '人工审核结果', value: 'checkStatu' },
        { label: '学院', value: 'categoryId' },
        { label: '审核人', value: 'peopleApprovedUserName' },
        { label: '人工审核时间', value: 'peopleApprovedTime' },
        { label: '显性标签', value: 'labelPrope' }
      ]
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
        this.$refs['selectCum'].setChoose(this.columnAry)
      }, 1000)
    })
  },
  methods: {
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          this.showContentList()
        } else {
          this.canShowPage = true
        }
      })
    },
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          let n = 0
          if (!this.tableTemp || this.tableTemp.length === 0) {
            return
          }
          this.tableTemp.forEach((item, index) => {
            if (item.jobType === 'VIDEO') {
              _this.getImg(item.jobImagesAddress, index).then(
                (data) => {
                  n++
                  _this.setData(n)
                },
                () => {
                  n++
                  _this.setData(n)
                }
              )
            }
          })
        },
        (res) => {
          // 接口请求不正常正常
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /*  符合条件后，给table赋值 */
    setData(n) {
      if (n === this.tempSize) {
        this.loading = false
        this.tableData = [...this.tableTemp]
      }
    },
    /* 获取封面图 */
    getImg(video, index) {
      if (!video) return Promise.resolve(false)
      let _this = this
      return getVideoImg(video, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].imgInfo = res
          return Promise.resolve(true)
        },
        (error) => {
          return Promise.reject(error)
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList(checkPage = true) {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      if (params.order === 'job_submit_time ASC2') {
        params.order = 'job_submit_time ASC'
      }
      if (params.order === 'job_submit_time DESC2') {
        params.order = 'job_submit_time DESC'
      }

      if (params.timeType === 'submitTime2') {
        params.timeType = 'submitTime'
      }
      delete params.createTime
      //查询列表内容
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableTemp = response.rows
          this.tableData = response.rows
          this.tempSize = response.rows.length
          //this.total = response.total
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
      if (!checkPage) return
      this.pageLoading = true
      //查询总条数
      ansyCountAPI(
        params,
        (response) => {
          this.pageLoading = false
          this.total = response
          //console.log(response)
        },
        (response) => {
          this.pageLoading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectAble(row, index) {
      if (row.checkStatu === 'UNCHECKED') {
        return true
      } else {
        return false
      }
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    /* 通过 */
    passWork() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要审核通过选中的${this.multipleSelection.length}条作业内容审核信息吗？`,
        '确定提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.jobcompletionId)
        })
        this.passMultRequest(ids)
      })
    },
    // 通过单个
    handlPassWork(id) {
      this.$confirm('确认通过吗？', '通过提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.passSingleRequest(id)
      })
    },
    // 通过单个请求
    passSingleRequest(id) {
      passSingleAPI(
        id,
        (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 批量通过请求
    passMultRequest(id) {
      let params = {
        id,
        isQueryString: true
      }
      passMultAPI(
        params,
        (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 批量不通过 */
    notPass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      this.multipleSelection.forEach((item) => {
        ids.push(item.jobcompletionId)
      })
      this.id = ids
      this.delDialogData.isShow = true
    },
    /* 不通过单个 */
    handlNotPassWord(id) {
      this.id = id
      this.delDialogData.isShow = true
    },
    failRequest(reason) {
      if (this.isDelete) {
        this.deleteRequest(this.id, reason)
        return false
      }
      if (this.id instanceof Array) {
        this.failMultRequest(this.id, reason)
      } else {
        this.failSingleRequest(this.id, reason)
      }
      this.delDialogData.isShow = false
    },
    // 不通过单条请求
    failSingleRequest(id, reason) {
      let params = {
        reason,
        isJson: true
      }
      failSingleRequestAPI(id, params, (response) => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.searchList()
      })
    },
    // 不通过多条请求
    failMultRequest(id, reason) {
      let params = { ids: id, reason, isJson: true }
      failMultRequestAPI(params, (response) => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.searchList()
      })
    },
    // 删除
    deleteJob(id) {
      this.id = id
      this.isDelete = true
      this.delDialogData.isShow = true
    },
    // 删除单条请求
    deleteRequest(id, reason) {
      let params = {
        reason,
        isJson: true
      }
      deleteRequestAPI(id, params, (response) => {
        this.searchList()
      })
      this.isDelete = false
    },
    /* 更改条数 */
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.searchList()
    },
    /* 换页 */
    changePage(type) {
      this.searchList(false)
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 显示详情 */
    showDetail(item) {
      if (item.checkStatu === 'UNPASS') {
        return
      }
      this.dialogData.type = 'jobDetail'
      this.dialogData.id = item.jobcompletionId
      this.dialogData.peopleApprovedUserName = item.peopleApprovedUserName
      this.dialogData.title = '作业内容审核详细'
      this.dialogData.isShow = true
    },
    /* 刷新列表 */
    refresh() {},
    showFailReason(row) {
      this.$alert(row.reason, '系统提示', {
        showConfirmButton: false
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less">
#jobCheckIndex {
  @import url('~@common/style/imgBox.less');
  .table-box {
    width: 100%;
  }
  .el-table {
    width: 99.9% !important;
  }
  .textContent {
    cursor: pointer;
  }
  .text-overflow {
    .cell {
      max-height: 140px;
    }
  }
}
</style>
